import React from 'react'
import { Link, useLocation } from 'react-router-dom'
import { Button, Space } from 'antd'

export const Navigation: React.FC = () => {
  const location = useLocation()

  return (
    <div style={{ padding: '16px', borderBottom: '1px solid #f0f0f0' }}>
      <Space>
        <Link to="/">
          <Button type={location.pathname === '/' ? 'primary' : 'default'}>
            设计器
          </Button>
        </Link>
        <Link to="/preview">
          <Button
            type={location.pathname === '/preview' ? 'primary' : 'default'}
          >
            预览
          </Button>
        </Link>
        <Link to="/test">
          <Button type={location.pathname === '/test' ? 'primary' : 'default'}>
            测试页面
          </Button>
        </Link>
      </Space>
    </div>
  )
}
